<template>
  <div class="bg-[#eef1f6] contain">
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="mb-30">
        <!-- 快捷操作入口 -->
        <h2>快捷操作入口</h2>
        <el-row class="quick-links" :gutter="20">
          <el-col :span="4" v-for="item in shortcuts" :key="item.url">
            <div
              @click="$router.push(item.url)"
              :class="item.class"
              class="rounded-lg h-[100px] flex w-[100%] items-center p-4 shadow-lg"
            >
              <i :class="item.icon" class="text-[#4796db] text-5xl"></i>
              <div class="ml-4 text-[24px]">{{ item.text }}</div>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-container>
          <el-main>
            <!-- 仓库地图展示 -->
            <el-card>
              <!-- 在这里添加仓库地图展示的内容 -->
              <div class="w-full h-[700px] overflow-auto" ref="line"></div>
            </el-card>
          </el-main>
        </el-container>
        <el-aside class="bg-white" width="500px ">
          <div style="height: 30%; width: 100%" ref="right1"></div>
          <div style="height: 30%; width: 100%" ref="right2"></div>
          <div style="height: 30%; width: 100%" ref="right3"></div>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { shortcuts, option, option3 } from "./config";
import { daily_inventoryListAPI } from "@/api/delivery/daily-inventory.js";
import { daily_order_statisticsListAPI } from "@/api/delivery/daily-order-statistics.js";
import { employee_inventory_statisticsListAPI } from "@/api/delivery/employee-inventory-statistics.js";
import { collection_statisticsListAPI } from "@/api/delivery/collection-statistics.js";
export default {
  data() {
    return {
      totalCapacity: 10000,
      usedCapacity: 6000,
      remainingCapacity: 4000,
      latestOrders: [
        { id: 1, name: "货物A", type: "入库" },
        { id: 2, name: "货物B", type: "出库" },
        // 其他订单数据
      ],
      shortcuts,
    };
  },
  methods: {},
  mounted() {
    // 每日收款统计
    // echarts.init(this.$refs.line).setOption(
    //   option("每日收款统计", {
    //     name: "aa",
    //     data: [100, 100, 300, 120, 150, 30, 70],
    //   })
    // );
    collection_statisticsListAPI({ pageSize: 20, pageNum: 1 }).then((res) => {
      console.log("每日收款统计", res.rows);
      echarts.init(this.$refs.line).setOption({
        ...option(
          "每日收款统计",
          res.rows.map((v) => v.collectionStaff),
          {
            name: "订单数",
            data: res.rows.map((v) => Number(v.deliveryNum)),
          },
          { name: "费用", data: res.rows.map((v) => v.cost) },
          { name: "重量", data: res.rows.map((v) => Number(v.weight)) }
        ),
      });

      console.log("数据", res.rows);
      console.log(
        "员工",
        res.rows.map((v) => v.collectionStaff)
      );
      console.log(
        "订单数",
        res.rows.map((v) => v.deliveryNum)
      );
      console.log(
        "重量",
        res.rows.map((v) => Number(v.weight))
      );
      console.log(
        "费用",
        res.rows.map((v) => v.cost)
      );
    });

    // 员工入库统计
    employee_inventory_statisticsListAPI({ pageSize: 20, pageNum: 1 }).then(
      (res) => {
        console.log(res.rows);
        const arr = res.rows.map((v) => {
          return [v.inventoryScanner, v.largeQuantity, v.smallQuantity];
        });
        echarts.init(this.$refs.right1).setOption({
          ...option3("员工入库统计", [
            ["product", "大件数量", "小件数量"],
            ...arr,
          ]),
        });
      }
    );
    // 每日下单
    daily_order_statisticsListAPI({ pageSize: 20, pageNum: 1 }).then((res) => {
      console.log(res.rows);
      const arr = res.rows.map((v) => {
        return [v.orderDate, v.orderCount, v.packageCount];
      });
      echarts.init(this.$refs.right2).setOption({
        ...option3("每日下单统计", [
          ["product", "订单数量", "快递数量"],
          ...arr,
        ]),
      });
    });
    // 每日入库
    daily_inventoryListAPI({ pageSize: 20, pageNum: 1 }).then((res) => {
      const arr = res.rows.map((v) => {
        return [v.arrivalTime, v.largeQuantity, v.smallQuantity];
      });
      echarts.init(this.$refs.right3).setOption({
        ...option3("每日入库统计", [["product", "大件数", "小件数"], ...arr]),
      });
    });
  },
};
</script>

<style scoped>
.quick-link {
  cursor: pointer;
  text-align: center;
}
/* .statistics {
  margin-top: 20px;
} */
.latest-orders {
  margin-top: 20px;
}
.contain {
  height: calc(100vh - 80px);
}
</style>
